<template>
  <div>
    <table border="1">
      <thead>
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>头像</th>
        </tr>
      </thead>
      <thead>
        <tr v-for="(item, index) in list" :key="index">
          <td>
            <slot name="ind" :Index="index+1">
               {{ index+1 }}
            </slot>
          </td>
          <td>
            <slot name="names"  :username="item.name">
               {{ item.name }}
            </slot>
          </td>
          <td>
            <slot name="ages" :userage="item.age">
              {{ item.age }}
            </slot>
          </td>
          <td>
            <slot name="img" :imgUrl="item.headImgUrl">
              {{ item.headImgUrl }}
            </slot>
          </td>
        </tr>
      </thead>
    </table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [
        {
          name: '小传同学',
          age: 18,
          headImgUrl:
        'http://yun.itheima.com/Upload/./Images/20210303/603f2d2153241.jpg'
        },
        {
          name: '小黑同学',
          age: 25,
          headImgUrl:
        'http://yun.itheima.com/Upload/./Images/20210304/6040b101a18ef.jpg'
        },
        {
          name: '智慧同学',
          age: 21,
          headImgUrl:
        'http://yun.itheima.com/Upload/./Images/20210302/603e0142e535f.jpg'
        }
      ]
    }
  }
}
</script>
